
<template>
  <!-- 班主任分班页面 -->
  <div class="app-container">
    <searchForm
      :formOptions="formOptions"
      @onSearch="onSearch"
      @onReset="onReset"
      :formLabelWidth="formLabelWidth"
      v-show="showSearch"
    />
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="roleList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="教工号" prop="tno" align="center" />
      <el-table-column label="姓名" prop="thrName" :show-overflow-tooltip="true" align="center" />
      <el-table-column label="任职院系" prop="deptName" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="所带学生总数" prop="total" align="center" />
      <el-table-column label="在岗状态" prop="postStatus" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.basic_post_status" :value="scope.row.postStatus" />
        </template>
      </el-table-column>
      <el-table-column label="任职类型" prop="officeType" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bc_office_type" :value="scope.row.officeType" />
        </template>
      </el-table-column>
      <el-table-column label="联系电话" prop="phone" align="center" width="110" />
      <el-table-column label="是否辅导员" prop="isClr" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.clr_counsellor_type" :value="scope.row.isClr" />
        </template>
      </el-table-column>
      <el-table-column label="是否班主任" prop="isClassThr" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.clr_cthr_type" :value="scope.row.isClassThr" />
        </template>
      </el-table-column>
      <el-table-column label="毕业院校" prop="graduated" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" width="190" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)">分配班级</el-button>
          <el-button size="mini" type="text" @click="ShiftViewing(scope.row)">分班查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看辅导员分配班级 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <h3>班主任信息</h3>
      <el-form :model="divisionInfor" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="教工号">
          <el-input v-model="divisionInfor.tno" disabled />
        </el-form-item>

        <el-form-item label="姓名">
          <el-input v-model="divisionInfor.thrName" disabled />
        </el-form-item>

        <el-form-item label="性别">
          <el-select v-model="divisionInfor.sex" clearable class="elSelect" disabled>
            <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
          <!-- <el-input v-model="" disabled /> -->
        </el-form-item>
      </el-form>
      <h3>查询条件</h3>
      <el-form
        :model="classParams"
        ref="classParams"
        size="small"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="年级" prop="gradeName">
          <el-input
            v-model="classParams.gradeName"
            placeholder="请输入年级"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="专业" prop="specialtyName">
          <el-input
            v-model="classParams.specialtyName"
            placeholder="请输入专业"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="班级名称" prop="name">
          <el-input
            v-model="classParams.name"
            placeholder="请输入班级名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="classListInfor" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="45" align="center" />
        <el-table-column label="年级" prop="gradeName" align="center" width="55" />
        <el-table-column label="院系" prop="deptNames" :show-overflow-tooltip="true" align="center" />
        <el-table-column
          label="专业"
          prop="specialtyName"
          :show-overflow-tooltip="true"
          align="center"
        />
        <el-table-column label="班号" prop="classCode" align="center" />
        <el-table-column label="班级名称" prop="name" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="人数" prop="classNumber" align="center" width="50" />
        <el-table-column label="岗位起始时间" prop="startTime" align="center">
          <template slot-scope="scope">
            <!-- <el-input v-model="scope.row.startTime"></el-input> -->
            <el-date-picker
              v-model="scope.row.startTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="岗位结束时间" prop="endTime" align="center">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.endTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 100%;"
            ></el-date-picker>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="classTotal > 0"
        :total="classTotal"
        :page.sync="classParams.pageNum"
        :limit.sync="classParams.pageSize"
        @pagination="getClassList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看辅导员分配班级情况 -->
    <el-dialog :title="title" :visible.sync="viewOpen" width="60%" append-to-body>
      <el-form
        :model="counsellorParams"
        ref="counsellorParams"
        size="small"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="年级" prop="gradeName">
          <el-input
            v-model="counsellorParams.gradeName"
            placeholder="请输入年级"
            clearable
            style="width: 200px"
            @keyup.enter.native="inquire"
          />
        </el-form-item>
        <el-form-item label="专业" prop="specialtyName">
          <el-input
            v-model="counsellorParams.specialtyName"
            placeholder="请输入专业"
            clearable
            style="width: 200px"
            @keyup.enter.native="inquire"
          />
        </el-form-item>
        <el-form-item label="班级名称" prop="className">
          <el-input
            v-model="counsellorParams.className"
            placeholder="请输入班级名称"
            clearable
            style="width: 200px"
            @keyup.enter.native="inquire"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="inquire">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="inquireQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="counsellorList.slice((counselorParams.pageNumber-1)*counselorParams.pageSize,counselorParams.pageNumber*counselorParams.pageSize)"
      >
        <el-table-column label="年级" prop="gradeName" align="center" />
        <el-table-column label="院系" prop="deptNames" :show-overflow-tooltip="true" align="center" />
        <el-table-column
          label="专业"
          prop="specialtyName"
          :show-overflow-tooltip="true"
          align="center"
        />
        <el-table-column label="班号" prop="classCode" align="center" />
        <el-table-column
          label="班级名称"
          prop="className"
          :show-overflow-tooltip="true"
          align="center"
        />
        <el-table-column label="人数" prop="classSize" align="center" width="50" />
        <el-table-column label="岗位起始时间" prop="startTime" align="center" />
        <el-table-column label="岗位截至时间" prop="endTime" align="center" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="counselorParams.pageNumber"
        :page-sizes="[10,20,30,50]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="counsellorList.length"
      ></el-pagination>
    </el-dialog>
  </div>
</template>

<script>
// import { classList } from "@/api/information/classInfor";
import {
  clrClassList,
  addClass,
  clrCounsellorList,
  delClass,
  crlClass,
  delRemove,
  ubdClass
} from "@/api/counselor/division";
import searchForm from "@/components/Search/searchForm.vue";
import { getDicts } from "@/api/system/dict/type";
export default {
  name: "Role",
  dicts: [
    "sys_normal_disable",
    "sys_user_sex", // 性别
    "clr_counsellor_type", // 是否辅导员
    "clr_cthr_type", // 是否班主任
    "bc_office_type", //在岗状态
    "basic_post_status" // 任职类型
  ],
  components: { searchForm },

  data() {
    return {
      formLabelWidth: "75px",
      formOptions: [
        {
          label: "教工号",
          prop: "tno",
          element: "el-input",
          placeholder: "请输入教工号"
        },
        {
          label: "姓名",
          prop: "thrName",
          element: "el-input",
          placeholder: "请输入姓名"
        },
        {
          label: "在岗状态",
          prop: "postStatus",
          element: "el-select",
          options: [],
          placeholder: "请选择在岗状态"
        },
        {
          label: "任职类型",
          prop: "officeType",
          element: "el-select",
          options: [],
          placeholder: "请选择任职类型"
        }
        // {
        //   label: "是否辅导员",
        //   prop: "isClr",
        //   element: "el-select",
        //   options: [
        //     { label: "是", value: "0" },
        //     { label: "否", value: "1" }
        //   ],
        //   placeholder: "请选择是否辅导员"
        // },
        // {
        //   label: "是否班主任",
        //   prop: "isClassThr",
        //   element: "el-select",
        //   options: [
        //     { label: "是", value: "0" },
        //     { label: "否", value: "1" }
        //   ],
        //   placeholder: "请选择是否班主任"
        // },
      ],
      classListInfor: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 班级信息列表总数
      classTotal: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查看分配班级
      viewOpen: false,
      // 是否显示弹出层（数据权限）
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      divisionInfor: {},
      teacher: {},
      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [],
      counsellorList: [], // 辅导员分班查看
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isClassThr: 0,
        type: 2
        // isClassThr:1
      },
      classParams: {
        pageNum: 1,
        pageSize: 10
      },
      counselorParams: {
        pageNumber: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      instructorList: [],
      distribution: [],
      counsellorParams: {},
      list: []
    };
  },
  created() {
    this.getList();
    this.getDictsOption();
  },
  methods: {
    getDictsOption() {
      getDicts("bc_office_type").then(res => {
        this.formOptions[3].options = res.data.map(item => {
          return {
            value: item["dictValue"],
            label: item["dictLabel"]
          };
        });
      });
      getDicts("basic_post_status").then(res => {
        this.formOptions[2].options = res.data.map(item => {
          return {
            value: item["dictValue"],
            label: item["dictLabel"]
          };
        });
      });
    },
    // 分班查看列表查询
    inquire() {
      let className = this.counsellorParams.className;
      let specialtyName = this.counsellorParams.specialtyName;
      let gradeName = this.counsellorParams.gradeName;
      this.list = this.counsellorList;
      if (className || gradeName || specialtyName) {
        this.counsellorList = this.list.filter(item => {
          return (
            item.className.includes(className) ||
            item.specialtyName.includes(specialtyName) ||
            item.gradeName.includes(gradeName)
          );
        });
      } else {
        this.counsellorList = this.list;
      }
    },
    inquireQuery() {
      this.counsellorParams = {};
      this.counsellorList = this.list;
    },
    // 获取搜索表单提交的数据
    onSearch(val) {
      // 查询条件和分页数据合并
      this.queryParams = Object.assign(this.queryParams, val);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    onReset(data) {
      this.queryParams.pageNum = 1;
      this.queryParams = Object.assign(this.queryParams, data);
      this.getList();
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      clrClassList(this.queryParams).then(response => {
        this.roleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // tableRowClassName({ row, rowIndex }) {
    //   // 把每一行的索引放进row
    //   row.index = rowIndex;
    // },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 分班查看弹框
    ShiftViewing(row) {
      this.title = "分班查看";
      this.viewOpen = true;
      this.teacher = row;
      crlClass(row.cId, 2).then(response => {
        console.log(response, "分班查看");
        this.counsellorList = response.data.classList;
        //   this.counsellorList = response.data.classList.map(item => {
        //   return Object.assign(item,{
        //     deptName: row.deptName,
        //   })
        // })
      });
      // row.classList.forEach(element => {
      //   console.log(element.classId);
      //   if (element.classId == null) {
      //     this.counsellorList = [];
      //   } else {
      //     // this.counsellorList = row.classList;
      //     this.counsellorList = row.classList.map(item => {
      //   return Object.assign(item,{
      //     deptName: row.deptName,
      //   })
      // })
      //   }
      // });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.classParams.pageNum = 1;
      this.getClassList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId);
      this.distribution = selection;
      // this.distribution = selection.map(item => {
      //   return Object.assign(item, {
      //     cId: this.divisionInfor.cId,
      //     isType: 2,
      //     classId: item.id,
      //     startTime: this.divisionInfor.startTime,
      //     endTime: this.divisionInfor.endTime
      //   });
      // });
      console.log(this.distribution, "4");
    },
    /** 分配辅导员按钮操作 */
    handleUpdate(row) {
      console.log(row);
      this.open = true;
      this.title = "班主任分配班级";
      this.divisionInfor = row;
      this.classParams.clrId = row.cId;
      this.getClassList();
    },
    async getClassList() {
      this.classParams.type = "2";
      let res = await ubdClass(this.classParams);
      if (res.code == 200) {
        // this.classListInfor = res.rows;
        this.classTotal = res.total;
        this.classListInfor = res.rows.map((item, index) => {
          return Object.assign(item, {
            startTime: null,
            endTime: null,
            cId: this.divisionInfor.cId,
            isType: 2,
            classId: item.id
          });
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      // console.log(this.instructorList, 'submitForm');
      addClass(this.distribution).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess("分配成功");
          this.open = false;
          this.getList();
        }
      });
    },
    //pageSize改变时触发的事件
    handleSizeChange(val) {
      this.counselorParams.pageNumber = 1;
      this.counselorParams.pageSize = val;
    },
    //当前页码发生改变时触发的事件
    handleCurrentChange(val) {
      this.counselorParams.pageNumber = val;
    },
    /** 删除按钮操作 */
    handleDelete(index, row) {
      let cId = this.teacher.cId;
      // const roleIds = row.roleId || this.ids;
      this.$modal
        .confirm('是否确认删除年级名称" ' + '"的数据项？')
        .then(function() {
          return delRemove(row.classId, 1, cId);
        })
        .then(() => {
          console.log(this.counsellorList);
          this.$modal.msgSuccess("删除成功");
          this.counsellorList.splice(index, 1);
          this.getList();
        })
        .catch(err => {});
    }
  }
};
</script>